<template>
  <div class="planet-chart">
    <canvas :id="`planet-chart${inPage}${indexBox}`"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'
import { paneldetailHistoryList} from "@/api/system/board"

export default {
  name: "board1",
  components: {},
  props: ['keyData', 'inPage', 'componentsId', 'indexBox'], // keyData inPage
  data() {
    return {
      myChart: null,
      defultList:[
        {
          label: "temperature",
          data: [20, 5, 30],
          backgroundColor: "rgba(255, 255,255, 0)",
          borderColor: "#36495d",
          borderWidth: 1
        },
        {
          label: "humidity",
          data: [16.6, 208.1, 300.3],
          backgroundColor: "rgba(255, 255,255, 0)",
          borderColor: "#47b784",
          borderWidth: 1
        }
      ],
      labels: ["05-09 12:00", "05-09 12:05", "05-09 12:10"]
    }
  },
  watch: {
    keyData() {
      // compontents preview dataBoard
      // console.log('是变化了嘛')
      if (this.inPage === 'preview') {
        this.initChart()
      }
      // this.mydata_1=[7,22,18,24,10,30];
      // this.myChart.data.datasets[0].data = this.mydata_1;
      // this.mydata_2=[14,23,12,2,30,23];
      // this.myChart.data.datasets[1].data = this.mydata_2;
      // this.myChart.update();
    }
  },
  methods: {
    initChart(option) {
      const ctx = document.getElementById(`planet-chart${this.inPage}${this.indexBox}`);
      let data_ = []
      let labels_ = []
      // console.log('this.keyData=====>', this.keyData)
      if(this.inPage==='preview' || this.inPage==='compontents'){
        if(this.keyData && this.keyData.length){
          for(let item of this.keyData){
            let dataBox = []
            for (var i = 1; i <= 3; i++){
              dataBox.push((Math.random() * 100).toFixed(1))
            }
            data_.push({
              label: item.name?item.name:(item.sku?item.sku:'temperature'),
              data: dataBox,
              backgroundColor: "rgba(255, 255,255, 0)",
              borderColor: item.body.lineColor,
              borderWidth: 2
            })
          }
          // console.log('data_:', data_)
        }else{
          data_ = JSON.parse(JSON.stringify(this.defultList))
          labels_ = JSON.parse(JSON.stringify(this.labels))
        }
      }else{
        data_ = JSON.parse(JSON.stringify(option.data))
        labels_ = JSON.parse(JSON.stringify(option.labels))
      }
      let planetChartData = {
        type: "line",
        data: {
          labels: labels_,
          datasets: data_
        },
        options: {
          responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
          maintainAspectRatio: false,// 保持图表原有比例
          lineTension: 1,
          legend: {
            display: true
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                  padding: 5 // 距离左边的数值多近
                }
              }
            ]
          }
        }
      }
      this.myChart = new Chart(ctx, planetChartData);
    },
    getColorFn(){
      let letters = '0123456789ABCDEF'.split('');
      let color = '#';
      for (let i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  },
  mounted() {
    let n =this
    if (this.inPage === 'dataBoard') {
      paneldetailHistoryList({id: this.componentsId, limit: 20}).then(res=>{
        if(res.data){
          let list_ = []
          let labels = []
          for(let index in res.data){
            let item = res.data[index]
            let data_ = []
            for (let i = 0; i < 10; i++){
              if(!Number(index)){
                let b_ = ''
                if(item.list[i]){
                  let c_ = item.list[i].createTime.split('-')
                  c_.splice(0, 1)
                  let d_ = c_.join('-')
                  let e_ = d_.split(':')
                  e_.splice(2,1)
                  b_ = e_.join(':')
                }else{
                  b_ = `未知${i+1}`
                }
                labels.push(b_)
              }
              if(item.list[index]){
                let a_ = JSON.parse(item.list[index].data)
                data_.push(a_[item.sku])
              }else{
                data_.push(0)
              }
            }
            list_.push({
              label: item.name,
              data: data_,
              backgroundColor: "rgba(255, 255,255, 0)",
              borderColor: n.keyData[index].body?n.keyData[index].body.lineColor:n.getColorFn(),
              borderWidth: 2
            })
          }
          this.initChart({data: list_,labels: labels})
        }
      })
    }else{
      this.initChart()
    }
  }
}
</script>

<style scoped>
#planet-chart1 {
  height: 100%;
}
</style>
